define('pc/js/mod/ArticleRecom', [
    'utils/fetchEnhancer',
    'utils/Tab',
    'utils/XTemplate',
    'utils/helpers',
    'pc/js/mod/Loading'], function(fetch, Tab, XTemplate, h, Loading) {

// 侧边栏文章推荐
var Recom = function(wrapperId) {
    this.doc = document;

    this.wrapperId = wrapperId;
    this.wrapper = null;
    this.outer =
'<section class="read-section">' +
    '<div class="read-tabs">' +
        '<label>排行榜</label>' +
        '<a href="javascript:;" class="read-tabs-item active" data-type="hot">热门</a>' +
        '<a href="javascript:;" class="read-tabs-item" data-type="cool">冷门</a>' +
    '</div>' +
    '<ul class="read-rank-item-wrapper" data-role="list">'+ Loading +'</ul>' +
'</section>';

    this.html =
    '<% var list = data.list, h=data.helpers; for(var i=0,len=list.length; i<len; i++){ %>' +
    '<li class="read-rank-item">' +
        '<span class="read-rank-item-index"><%= (i+1) %></span>' +
        '<a title="<%= list[i].title %>" href="<%= h.U("posts", {id: list[i].id}, ".html") %>"><%= list[i].title %></a>' +
    '</li>' +
    '<% } %>';

    this.init();
};
Recom.prototype = {
    constructor: Recom,
    init: function() {
        this.template = new XTemplate();
        this.template.compile(this.html);

        this.wrapper = this.doc.getElementById(this.wrapperId);

        this.wrapper.innerHTML = this.outer;

        this.bindEvent();
    },
    bindEvent: function() {
        var _self = this;
        var h = this.wrapper.querySelectorAll('.read-tabs-item');
        var t = new Tab('read-tabs-item', 'read-tabs-item active');

        t.callback = function(index) {
            _self.fetchList(0 === index ? 'hot' : 'cool');
        };
        t.init(h, null);
    },
    fetchList: function(type) {
        var _self = this;

        fetch('/api/post/recommend?type=' + type).then(function(json){
            if(0 === json.status) {
                _self.render(json.data.data);
            }
        });
    },
    render: function(list) {
        var html = this.template.run({
            list: list,
            helpers: h
        });

        this.wrapper.querySelector('[data-role="list"]').innerHTML = html;
    }
};

return Recom;

});
